<template>
  <div class="index-page-header">
    <!-- 没有二级标题的是顶部标题 -->
    <h1 :style="{ 'font-size': fontSize + 'px' }">{{ title }}</h1>
    <div @click="handleClick">
      <!-- <span>{{ subtitle }}</span> -->
      <i :class="['iconfont', icon]"></i>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
defineProps({
  title: {
    type: String,
    default: "",
  },
  // subtitle: {
  //   type: String,
  //   default: "",
  // },
  fontSize: {
    type: Number,
    default: 18,
  },
  icon: {
    type: String,
    default: "icon-sousuo",
  },
});

const emit = defineEmits(["topage"]);
const handleClick = () => {
  emit("topage");
};
</script>

<style scoped lang="less">
.index-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;

  > h1 {
    font-size: 18px;
    color: #111;
  }

  > div {
    color: #999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
      font-size: 13px;
      margin-right: 3px;
    }

    .iconfont {
      font-size: 18px;
    }

    .icon-sousuo {
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
